<template>
    <div class="edu-page-warp">
        <div v-if="baseInfo">
            <div class="edu-page-title mg-top">基本信息</div>
            <el-card shadow="never" body-style="padding: 24px;margin-bottom: -14px;">
                <div style="line-height: 60px;height: 60px;">
                    <img
                        v-if="imageUrl"
                        class="head-portrait"
                        :src="imageUrl"
                        style="float: left;width: 60px;height: 60px;"
                    />
                    <div style="margin: 0 0 0 20px;float: left;">{{schemeStudent.name}}</div>
                    <span
                        class="text-light-gray"
                        style="color:black;float:right;"
                    >申请编号：{{ rollInfo.no }}</span>
                </div>
                <el-form label-width="110px" style="margin-top: 15px;">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="学号:">{{schemeStudent.studentId}}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="辅修年级:">
                                <span>{{schemeStudent.grade}}级</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item :label="$t('minor.major.college') + ':'">
                                <span>{{schemeStudent.faculty}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="辅修专业:">
                                <span>{{schemeStudent.profession}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="培养层次:">
                                <span>{{schemeStudent.trainingLevel}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="入学时间:">
                                <span>{{schemeStudent.enrolDate}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学制:">
                                <span>{{schemeStudent.lengthSchooling}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="导师:">
                                <span>{{schemeStudent.teacherName}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="培养方案:">
                                <a
                                    @click="catCulture(schemeStudent.cultureId)"
                                >{{schemeStudent.cultureName}}</a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row :gutter="20" class="edu-info-list" v-if="btnIsShow">
                    <el-col>
                        <div class="item-group" style="width: 100%">
                            <label class="secondary-text label">审批结果：</label>
                            <div class="result_success" v-if="rollInfo.result == 'End'">
                                <i class="el-icon-circle-check"></i>
                                <span>通过</span>
                            </div>
                            <div class="result_success" v-if="rollInfo.result == 'Process'">
                                <i class="el-icon-circle-check"></i>
                                <span>进行中</span>
                            </div>
                            <div class="result_fail" v-if="rollInfo.result == 'Reject'">
                                <i class="el-icon-circle-close"></i>
                                <span>驳回</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="edu-info-list">
                    <el-col>
                        <div class="item-group" style="width: 100%">
                            <label class="secondary-text label">审批内容：</label>
                            <div class="display-inline-block" style="width: 50%">
                                <span
                                    class="majoy-text content_color span"
                                    style="text-decoration: none;cursor:pointer"
                                    @click="showCulturePlan"
                                >微专业培养计划</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="edu-info-list">
                    <el-col>
                        <div class="item-group" style="width: 100%">
                            <label class="secondary-text label">审批类型：</label>
                            <div class="display-inline-block" style="width: 50%">
                                <span class="majoy-text span">微专业辅修培养计划</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="edu-info-list">
                    <el-col>
                        <div class="item-group" style="width: 100%">
                            <label class="secondary-text label">审批说明：</label>
                            <div class="display-inline-block" style="width: 50%">
                                <span class="majoy-text" style="width: 100%">
                                    <el-input
                                        :rows="3"
                                        v-if="isShowContent"
                                        v-model="approvalInfo.content"
                                        :disabled="rollInfo.result != 'Process'"
                                        type="textarea"
                                        placeholder="请输入内容"
                                        style="width: 100%;min-height: 80px;"
                                    />
                                    <span v-else>{{approveContent}}</span>
                                </span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="edu-info-list">
                    <el-col>
                        <div class="item-group" style="width: 100%">
                            <label class="secondary-text label">证明材料：</label>
                            <el-button
                                v-if="rollInfo.result != 'Process'"
                                v-for="(item, index) in evidenceList"
                                :key="index"
                                type="text"
                                @click="handleGetFile(item)"
                            >{{ item.substr(10) }}</el-button>
                            <div class="display-inline-block">
                                <el-upload
                                    :headers="{'X-Token': $store.state.session.sessionid}"
                                    :data="{bucketname: 'face', folderpath: 'file'}"
                                    :on-preview="handleAvatarPreview"
                                    :on-remove="handleAvatarRemove"
                                    :on-success="handleAvatarSuccess"
                                    :disabled="rollInfo.result != 'Process'"
                                    class="upload-demo"
                                    action="/api/commonservice/obsfile/uploadfile"
                                    multiple
                                >
                                    <el-button
                                        v-if="rollInfo.result == 'Process' && !btnIsShow"
                                        size="small"
                                        type="primary"
                                    >点击上传</el-button>
                                </el-upload>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div class="edu-opertion-bar" v-if="!btnIsShow">
                    <div class="float-right">
                        <el-button
                            :disabled="rollInfo.result != 'Process'"
                            type="danger"
                            @click="submiteReject"
                        >驳回</el-button>
                        <el-button
                            :disabled="rollInfo.result != 'Process'"
                            type="primary"
                            @click="submiteThrough"
                        >通过</el-button>
                    </div>
                </div>
            </el-card>
            <div class="edu-page-title" style="margin-top: 32px;">审批进度</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-table :data="rollInfo.listApproveHistory" stripe style="width: 100%">
                    <el-table-column prop="id" label="序号" width="80" show-overflow-tooltip />
                    <el-table-column prop="time" label="时间" width="160" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="approvorName"
                        label="审批人"
                        width="120"
                        show-overflow-tooltip
                    />
                    <el-table-column prop="groupStr" label="角色" width="120" show-overflow-tooltip />
                    <el-table-column prop="result" label="审批结果" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.result == 'Process'" type="success">进行中</el-tag>
                            <el-tag v-if="scope.row.result == 'End'" type="info">已结束</el-tag>
                            <el-tag v-if="scope.row.result == 'Reject'" type="warning">已驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="oaNo" label="OA单号" show-overflow-tooltip />
                    <el-table-column prop="content" label="审批说明" show-overflow-tooltip />
                    <el-table-column prop="fileInfo" label="审批材料" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div v-if="scope.row.fileInfo">
                                <el-button
                                    v-for="item in scope.row.fileInfo.approveAttachment"
                                    :key="item"
                                    type="text"
                                    @click="handleGetFile(item)"
                                >{{ item }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <div v-if="!baseInfo">
            <cat-chapter @goBack="baseInfo=true" :templateId="templateId" :type="type" />
        </div>
        <CustomPlanDialog
            v-if="isShow"
            ref="customPlanDialog"
            :studentId="studentId"
            :entranceTerm="entranceTerm"
        />
    </div>
</template>
<script>
import {
    selectApproFlow,
    approvalThrough,
    approvalReject
} from "common/src/api/approval";
import {
    findUserInfoByIdType,
    findLocalUserById,
    findUserInfoByType
} from "common/src/api/user";
import { downloadimage } from "common/src/api/minor/minorCulturePlanManager";
import { downloadfile } from "common/src/api/upload";
import { getSessionUser } from "common/src/api/session";
import filters from "common/src/filters";
import { mapActions } from "vuex";
import CatChapter from "../component/CatChapter";
import CustomPlanDialog from "../component/CustomPlanDialog";
export default {
    name: "minorApproveDetail",
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    components: { CatChapter, CustomPlanDialog },
    data() {
        return {
            id: "",
            rollInfo: [],
            isShowContent:true,
            baseInfo: true,
            studentId: "",
            approveContent:"",
            isShow: false,
            entranceTerm: "",
            user: {},
            imageUrl: "",
            approvalInfo: {
                uid: "",
                no: "",
                content: "",
                approveAttachment: [],
                remark: null
            },
            evidenceList: [],
            templateId: "",
            type: 2,
            cultureName: "",
            checkVisible: false,
            departmentName: "",
            showCulturePlanDialog: false,
            btnIsShow: false,
            schemeStudent: {
                name: "",
                studentId: "",
                grade: "",
                faculty: "",
                profession: "",
                trainingLevel: "",
                enrolDate: "",
                lengthSchooling: "",
                cultureId: "",
                teacherName: "",
                cultureName: ""
            }
        };
    },
    mounted() {
        if (!this.$checkMinor()) return;
        //先默认为空
        this.isShow = false;
        this.id = this.$route.query.id;
        this.initPage(this.id);
        this.getType();
    },
    methods: {
        //获取当前登录角色权限信息
        getType() {
            getSessionUser().then(res => {
                if ((res.code = 200)) {
                    if (!res.data.mockUser) {
                        if (res.data.user.type == 2) {
                            //学生
                            this.btnIsShow = true;
                        } else if (
                            res.data.user.innerRoles.join(",").indexOf("1") >=
                                0 &&
                            res.data.user.currentRole == "1"
                        ) {
                            //校管理员登录，放开审核操作
                            this.btnIsShow = false;
                        } else if (
                            res.data.user.innerRoles.join(",").indexOf("2") >=
                                0 &&
                            res.data.user.innerRoles.join(",").indexOf("1") ==
                                -1 &&
                            res.data.user.currentRole == "1"
                        ) {
                            //学院教务登录，放开审核操作
                            this.btnIsShow = false;
                        }
                    } else {
                        if (
                            !!res.data.mockUser &&
                            res.data.mockUser.type == 2
                        ) {
                            //学生
                            this.btnIsShow = true;
                        } else if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("1") >= 0 &&
                            res.data.mockUser.currentRole == "1"
                        ) {
                            //校管理员登录，放开审核操作
                            this.btnIsShow = false;
                        } else if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("2") >= 0 &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("1") == -1 &&
                            res.data.mockUser.currentRole == "1"
                        ) {
                            //学院教务登录，放开审核操作
                            this.btnIsShow = false;
                        }
                    }
                }
            });
        },
        ...mapActions(["delTab"]),
        _init_(user) {
            const query = "userId=" + user.uid + "&type=" + user.type;
            findUserInfoByIdType(query).then(res => {
                if (res.code === 200 && res.data) {
                    res.data.userType = user.type;
                    this.user = res.data;
                }
            });
        },
        _initLocalUser(uid) {
            findLocalUserById("userId=" + uid).then(res => {
                if (res.code === 200 && res.data) {
                    this.user = res.data;
                    this.user.name = res.data.userName;
                }
            });
        },
        initPage(id) {
            this.isShowContent = true;
            this.approveContent = "";
            if (!this.$checkMinor()) return;
            selectApproFlow(id).then(res => {
                this.evidenceList = [];
                if (res && res.data) {
                    const _user = {
                        uid: res.data.applicantId,
                        type: res.data.userType ? res.data.userType : "2"
                    };

                    if (res.data.userType === "3") {
                        this._initLocalUser(_user.uid);
                    } else {
                        this._init_(_user);
                    }
                    this.approvalInfo.uid = res.data.applicantId;
                    this.approvalInfo.no = res.data.no;
                    this.approvalInfo.time = res.data.time;
                    let result = JSON.parse(res.data.content);
                    if (result && result.cultureName) {
                        this.cultureName = result.cultureName;
                    }
                    if (result && result.departmentId) {
                        this.departmentName = result.departmentId;
                    }
                    this.evidenceList = result.evidenceList;
                    this.schemeStudent = {
                        name: result.studentName,
                        studentId: result.studentNum,
                        grade: result.studentEntryGrade,
                        faculty: result.studentFaculty,
                        profession: result.major,
                        trainingLevel: result.trainingLevel,
                        enrolDate: result.enrolDate,
                        lengthSchooling: result.lengthSchooling,
                        teacherName: result.teacherName,
                        cultureId: result.cultureId,
                        cultureName: result.cultureName
                    };
                    this.isShow = true;
                    this.studentId = result.studentNum;
                    this.entranceTerm = result.minorGrade;
                    this.getPhoto(result.studentNum);
                    this.studentId = result.studentNum;
                    if(res.data.result=="Reject" || res.data.result=="End"){
                        this.isShowContent = false;
                        this.approveContent =res.data.listApproveHistory[1].content;
                    }
                    this.rollInfo = res.data;
                }
            });
        },
        //获取头像地址
        getPhoto(uid) {
            const query = "userId=" + uid + "&type=1";
            findUserInfoByType(query).then(res => {
                if (res.code == 200) {
                    let photo = res.data.photoPath;
                    if (!photo) {
                        this.imageUrl = "/static/images/manage.png";
                    } else {
                        downloadimage(photo).then(res => {
                            this.imageUrl = res.data;
                        });
                    }
                }
            });
        },
        catCulture(id) {
            this.baseInfo = false;
            this.templateId = id;
        },
        handleGetFile(objectkey) {
            if (!objectkey) return;
            downloadfile(objectkey);
        },
        showCulturePlan() {
            this.$refs.customPlanDialog.$refs.personPlanDialog.open();
        },
        submiteThrough() {
            approvalThrough(this.approvalInfo).then(res => {
                this.delTab("/approveDetail");
                window.history.back();
            });
        },
        submiteReject() {
            approvalReject(this.approvalInfo).then(res => {
                this.delTab("/approveDetail");
                window.history.back();
            });
        }
    }
};
</script>
<style scoped>
.content_color {
    color: #3a7fe8;
    text-decoration: none;
    font-size: 13px;
}
.result_success {
    color: #0bb31f;
    float: right;
    font-size: 15px;
    margin-right: 87%;
    line-height: 30px;
}
.result_fail {
    color: #e6a23c;
    float: right;
    font-size: 15px;
    margin-right: 88%;
    line-height: 30px;
}
</style>

